<template>
  <div class="person-dialog">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap person-container">
        <div class="title flex flexac flexjcsb fs14 cfff fwb p-r-20">
          <div class="m-l-10">{{ isEdit ? '修改维保人员' : '新增维保人员' }}</div>
          <i class="el-icon-close" @click="handleCloseDialog" />
        </div>

        <div class="person-main flex flexdc m-t-30 ">
          <div class="flex flexjcsa">
            <!-- <el-button class="defaultbtn saveBtn" @click="handleImport">导入</el-button> -->
            <!-- 左边输入框 -->
            <div>
              <!-- <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>维保单位：</span>
                    <el-input v-model="data.unitName" placeholder="请选择维保单位" />
                    <el-button type="warning" class="sele-btn plBtn co-btn el-icon-circle-check" @click="handleUnit">选择维保单位</el-button>
                  </div>
                </div>
              </div> -->
              <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>姓名：</span>
                    <el-input v-model="form.name" placeholder="请输入机构名称" />
                  </div>
                </div>
              </div>
              <div class="person-row flex flexac ">
                <div class="inputLable inputLable2 flex flexac">
                  <span class="name texttr"><span class="mustval">*</span>性别：</span>
                  <div class="flex">
                    <el-radio v-model="form.sex" :label="1">男</el-radio>
                    <el-radio v-model="form.sex" :label="2">女</el-radio>
                  </div>
                </div>
              </div>
              <div class="person-row flex flexac ">
                <div class="inputLable inputLable1 flex flexac  ">
                  <span class="name texttr"><span class="mustval">*</span>证件类型：</span>
                  <!-- <el-input class="input" v-model="form.address"aceholder="请输入使用单位地址"></el-input> -->
                  <el-select v-model="form.certType" placeholder="请选择证件类型">
                    <el-option v-for="item in certTypes" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>

              </div>
              <div class="person-row flex flexac ">
                <div class="inputLable inputLable2 flex flexac ">
                  <span class="name texttr"><span class="mustval">*</span>手机号码：</span>
                  <el-input v-model="form.phone" type="number" placeholder="请输入手机号码" />
                </div>
              </div>

              <div class="person-row flex flexac ">
                <div class="flex flexac">

                  <div class="inputLable inputLable2 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>证件号码：</span>
                    <el-input v-model="form.certNo" placeholder="请输入证件号码" />
                  </div>

                </div>
              </div>
              <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>学历：</span>
                    <el-select v-model="form.education" placeholder="请选择学历">
                      <el-option v-for="item in educations" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
              </div>

              <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>电梯安装维修资格证：</span>
                    <!-- <el-input class="input" v-model="form.securityPerson"aceholder="请输入安全管理员"></el-input> -->
                    <el-select v-model="form.installCertNo" placeholder="请选择电梯安装维修资格证">
                      <el-option v-for="item in installCertNos" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
              </div>

              <div class="person-row">
                <div class="inputLable inputLable1 flex ">
                  <span class="name texttr">描述：</span>
                  <el-input
                    v-model="form.remark"
                    type="textarea"
                    resize="none"
                    class="person-area"
                    :autosize="{ minRows: 4, maxRows: 5}"
                    placeholder="请添加描述信息"
                  />
                </div>
              </div>
            </div>
            <!-- 分割线 -->
            <div class="person-divider" />
            <!-- 右边输入框 -->
            <div class="m-r-20">
              <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>是否专业技术人员：</span>
                    <div class="flex">
                      <el-radio v-model="form.isTechnician" :label="true">是</el-radio>
                      <el-radio v-model="form.isTechnician" :label="false">否</el-radio>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="form.isTechnician">
                <div class="person-row flex flexac ">
                  <div class="flex flexac">
                    <div class="inputLable inputLable1 flex flexac">
                      <span class="name texttr"><span class="mustval">*</span>专业类型：</span>
                      <el-select v-model="form.majorType" placeholder="请选择专业类型">
                        <el-option v-for="item in majorTypes" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="person-row flex flexac ">
                  <div class="flex flexac">
                    <div class="inputLable inputLable1 flex flexac">
                      <span class="name texttr"><span class="mustval">*</span>技术等级：</span>
                      <el-select v-model="form.skillLevel" placeholder="请选择技术等级">
                        <el-option v-for="item in skillLevels" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>

                <div class="person-row flex flexac ">
                  <div class="flex flexac">
                    <div class="inputLable inputLable1 flex flexac">
                      <span class="name texttr"><span class="mustval">*</span>技术职称：</span>
                      <el-select v-model="form.technicalTitle" placeholder="请选择技术等级">
                        <el-option v-for="item in technicalTitles" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>
              </div>
              <div class="person-row flex flexac ">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>是否作业人员：</span>
                    <div class="flex">
                      <el-radio v-model="form.isWorkman" :label="true">是</el-radio>
                      <el-radio v-model="form.isWorkman" :label="false">否</el-radio>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="form.isWorkman">

                <div class="person-row flex flexac ">
                  <div class="flex flexac">
                    <div class="inputLable inputLable1 flex flexac">
                      <span class="name texttr"><span class="mustval">*</span>作业人员职业资格证：</span>
                      <el-select v-model="form.workmanProfessionCert" placeholder="请选择作业人员职业资格证">
                        <el-option v-for="item in workmanProfessionCerts" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>

                <div class="person-row flex flexac ">
                  <div class="flex flexac">
                    <div class="inputLable inputLable1 flex flexac">
                      <span class="name texttr"><span class="mustval">*</span>作业人员技术资格证：</span>
                      <el-select v-model="form.workmanTechniqueCert" placeholder="请选择作业人员技术资格证">
                        <el-option v-for="item in workmanTechniqueCerts" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                    </div>
                  </div>
                </div>

              </div>

              <div class="person-row flex flexac">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>参加维保工作日期：</span>
                    <el-date-picker v-model="form.joinWorkTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" />
                  </div>
                </div>
              </div>
              <div class="person-row flex flexac">
                <div class="flex flexac">
                  <div class="inputLable inputLable1 flex flexac">
                    <span class="name texttr"><span class="mustval">*</span>是否购买保险：</span>
                    <div class="flex">
                      <el-radio v-model="form.isPurchaseInsurance" :label="true">是</el-radio>
                      <el-radio v-model="form.isPurchaseInsurance" :label="false">否</el-radio>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>

          <div class="flex flexcenter m-t-80 m-b-30 person-footer">
            <el-button v-if="!isEdit" class="m-r-30 btn saveBtn el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
            <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>

            <el-button class="clsoeBtn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <UnitDialog v-model="unitVisible" />
  </div>
</template>

<script>

import UnitDialog from './maUnit'
import { showNotice, checkMobile } from '@/utils/toolclass'
// import storage from '@/utils/storage'
import { staffAdd, maStaffUpdate } from '@/api/maintenance/maintenance'

export default {
  components: { UnitDialog },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      unitVisible: false,
      form: { ...this.data },
      maintenanceUnit: [],
      educations: [
        {
          value: 0,
          label: '初中'
        }, {
          value: 1,
          label: '中专'
        }, {
          value: 2,
          label: '高中'
        }, {
          value: 3,
          label: '大专'
        }, {
          value: 4,
          label: '本科'
        }, {
          value: 5,
          label: '硕士'
        }, {
          value: 6,
          label: '博士'
        }
      ],
      certTypes: [
        {
          value: 1,
          label: '身份证'
        }
      ],
      installCertNos: [
        {
          value: '0',
          label: '电梯修理'
        },
        {
          value: '1',
          label: '维护保养'
        }
      ],
      majorTypes: [
        {
          value: 0,
          label: 'T1'
        }, {
          value: 1,
          label: 'T2'
        },
        {
          value: 2,
          label: 'T3'
        }, {
          value: 3,
          label: 'A4'
        }
      ],
      skillLevels: [
        {
          value: 1,
          label: '一级'
        }, {
          value: 2,
          label: '二级'
        },
        {
          value: 3,
          label: '三级'
        }, {
          value: 4,
          label: '四级'
        },
        {
          value: 5,
          label: '五级'
        }
      ],
      technicalTitles: [
        {
          value: 1,
          label: '初级'
        }, {
          value: 2,
          label: '中级'
        },
        {
          value: 3,
          label: '高级'
        }, {
          value: 4,
          label: '技工'
        },
        {
          value: 5,
          label: '高级技工'
        }
      ],
      workmanProfessionCerts: [
        {
          value: 1,
          label: '初级'
        }, {
          value: 2,
          label: '中级'
        },
        {
          value: 3,
          label: '高级'
        }, {
          value: 4,
          label: '技工'
        },
        {
          value: 5,
          label: '高级技工'
        }
      ],
      workmanTechniqueCerts: [
        {
          value: 0,
          label: '电梯修理'
        }, {
          value: 1,
          label: '维护保养'
        }
      ]
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      this.form = { ...v }
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleUnit() {
      this.unitVisible = true
    },
    handleSave(type) {
      if (!(/^\S+$/.test(this.form.name))) {
        showNotice('error', '提示', '姓名不能为空')
        return
      }
      if (!(/^\S+$/.test(this.form.sex))) {
        showNotice('error', '提示', '请选择性别')
        return
      }
      if (!(/^\S+$/.test(this.form.phone))) {
        showNotice('error', '提示', '手机号码不能为空')
        return
      }

      if (!checkMobile(this.form.phone)) {
        showNotice('error', '提示', '手机号码格式不对')
        return
      }

      if (this.form.certNo === '') {
        showNotice('error', '提示', '证件号码不能为空')
        return
      }
      if (this.form.education === '') {
        showNotice('error', '提示', '请选择学历')
        return
      }
      if (this.form.installCertNo === '') {
        showNotice('error', '提示', '请选择电梯安装维修资格证')
        return
      }
      if (!this.form.isTechnician && !this.form.isWorkman) {
        showNotice('error', '提示', '专业技术人员和作业人员选项必须有一项为选中')
        return
      }

      if (this.form.joinWorkTime === '') {
        showNotice('error', '提示', '请选择参加维保工作日期')
        return
      }

      // if (this.form.remark === '') {
      //   showNotice('error', '提示', '描述不能为空')
      //   return
      // }
      // 添加人员
      const add = {
        certNo: this.form.certNo, // 证件号码
        certType: this.form.certType, // 证件类型
        duties: this.form.duties, // 职务
        education: this.form.education, // 学历
        id: this.form.id, // id
        installCertNo: parseInt(this.form.installCertNo), // 安装维修资格证号
        isPurchaseInsurance: this.form.isPurchaseInsurance, // 是否购买保险
        isTechnician: this.form.isTechnician, // 是否专业技术人员
        isWorkman: this.form.isWorkman, // 是否作业人员
        joinWorkTime: this.form.joinWorkTime, // 参加维保工作时间
        majorType: this.form.majorType, // 专业类型
        name: this.form.name, // 姓名
        phone: this.form.phone, // 联系电话
        remark: this.form.remark, // 备注
        sex: this.form.sex, // 性别
        skillLevel: this.form.skillLevel, // 技术等级 ----
        technicalTitle: this.form.technicalTitle, // 技术职称
        unitId: this.form.unitId, // 维保单位ID -----
        unitName: this.form.unitName, // 维保单位名称 ------
        version: this.form.version, // 版本号 -------
        workmanProfessionCert: this.form.workmanProfessionCert, // 作业人员职业资格证
        workmanTechniqueCert: this.form.workmanTechniqueCert // 作业人员技术资格证
      }
      // console.log(add)
      // console.log(this.form)
      if (type === 0) {
        this.handlePropertyAdd(add)
      } else {
        this.handleEdit(add)
      }
    },
    // 添加人员
    handlePropertyAdd(data) {
      staffAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    // 修改人员
    handleEdit(data) {
      maStaffUpdate(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '修改成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          showNotice('error', '提示', res.msg)
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import "@/styles/addtable.scss";
@import "@/styles/public.scss";

.person-dialog {
  .person-container {
    width: 1000px;
    background: #ffffff;
    margin-left: -200px;
    .person-row {
      margin-bottom: 15px;
    }
    .person-area {
      width: 240px;
    }
    .person-divider {
      border: 1px dashed #eeeeee;
    }
    .person-footer {}
  }
  .el-icon-circle-check:before {
  margin-right: 4px;
}
.con {
  padding-left: 50px;
  margin-top: 30px;
  .inputLable .input {
    height: 36px;
  }
}
.btn {
  width: 100px;
  height: 40px;
}
.inputLable input {
  width: 450px;
}
.inputLable .name {
  width: 190px !important;
  padding-right: 20px;
}
}

</style>
